---
title: gluestack-ui AlertDialog Component | Installation, Usage, and API

description: Prompt users to take action with interruptions for confirmations or important prompts.

pageTitle: AlertDialog

pageDescription: Prompt users to take action with interruptions for confirmations or important prompts.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Components/Overlay/AlertDialog" />

import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogCloseButton,
  AlertDialogFooter,
  AlertDialogBody,
  Button,
  ButtonText,
  Center,
  HStack,
  VStack,
  Box,
  Text,
  Heading,
  Image,
  Icon,
  AlertCircleIcon,
  CloseIcon,
  CheckCircleIcon,
  TrashIcon,
} from '../../core-components/nativewind';
import { AlertTriangle, UploadCloud } from "lucide-react-native"
import { transformedCode } from '../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
  CollapsibleCode,
  Tabs
} from '@gluestack/design-system';
import Wrapper from '../../core-components/nativewind/Wrapper';


This is an illustration of **AlertDialog** component.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={true}
    metaData={{
      code: `
        function Example(){
          const [showAlertDialog, setShowAlertDialog] = React.useState(false);
          const handleClose = () => setShowAlertDialog(false);
          return (
            <>
              <Button onPress={() => setShowAlertDialog(true)}>
                <ButtonText>Open Dialog</ButtonText>
              </Button>
              <AlertDialog
                isOpen={showAlertDialog}
                onClose={handleClose}
                {...props}
              >
                <AlertDialogBackdrop />
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <Heading className="text-typography-950 font-semibold" size="md">
                      Are you sure you want to delete this post?
                    </Heading>
                  </AlertDialogHeader>
                  <AlertDialogBody className="mt-3 mb-4">
                    <Text size="sm">
                      Deleting the post will remove it permanently and cannot be undone. Please confirm if you want to proceed.
                    </Text>
                  </AlertDialogBody>
                  <AlertDialogFooter className="">
                    <Button
                      variant="outline"
                      action="secondary"
                      onPress={handleClose}
                      size="sm"
                    >
                      <ButtonText>Cancel</ButtonText>
                    </Button>
                    <Button size="sm" onPress={handleClose}>
                      <ButtonText>Delete</ButtonText>
                    </Button>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'Example');
      },
      scope: {
        Wrapper,
        AlertDialog,
        AlertDialogBackdrop,
        AlertDialogContent,
        AlertDialogHeader,
        AlertDialogCloseButton,
        AlertDialogFooter,
        AlertDialogBody,
        CloseIcon,
        Button,
        ButtonText,
        Text,
        Heading,
        Icon,
      },
      argsType: {
        size: {
          control: 'select',
          options: ['xs', 'sm', 'md', 'lg', 'full'],
          default: 'md',
        },
      },
    }}
  />
</Wrapper>

<br />

## Installation

<Tabs value="cli" type="section">
<Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add alert-dialog
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

### Step 1: Install the following dependencies:

```bash
npm i @gluestack-ui/alert-dialog @legendapp/motion
```
> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper.

### Step 2: Copy and paste the following code into your project.

<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/alert-dialog/index.tsx --%% 
```

</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogCloseButton,
  AlertDialogFooter,
  AlertDialogBody,
} from '@/components/ui/alert-dialog';
```

```jsx
export default () => (
  <AlertDialog>
    <AlertDialogBackdrop />
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogCloseButton />
      </AlertDialogHeader>
      <AlertDialogBody />
      <AlertDialogFooter />
    </AlertDialogContent>
  </AlertDialog>
);
```
### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### AlertDialog

Contains all View related layout style props and actions.
It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
         </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the alert-dialog will open. Useful for controllable state behavior.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onClose</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`() => any`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Callback invoked when the alert-dialog is closed.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>useRNModal</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, renders react-native native modal. (Only works in react-native)`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>defaultIsOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Specifies the default open state of the AlertDialog`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>initialFocusRef</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`React.RefObject<any>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The ref of element to receive focus when the alert-dialog opens.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>finalFocusRef</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`React.RefObject<any>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The ref of element to receive focus when the alert-dialog closes.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>avoidKeyboard</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the AlertDialog will avoid the keyboard.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>closeOnOverlayClick</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>true</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the AlertDialog will close when the overlay is clicked.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isKeyboardDismissable</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD >
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>true</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the keyboard can dismiss the AlertDialog`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### AlertDialogBackdrop

It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer.

#### AlertDialogContent

It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. You can use any declarative animation library you prefer.

#### AlertDialogCloseButton

It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.

#### AlertDialogHeader

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### AlertDialogBody

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### AlertDialogFooter

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

### Features

- Keyboard support for actions.

### Accessibility

We have outlined the various features that ensure the AlertDialog component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.It uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/) which follows the [WAI-ARIA Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).

#### Keyboard

- `Tab`: 
  - Moves focus to the next tabbable element inside the dialog.
  - If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog.
- `Shift + Tab`: 
  - Moves focus to the previous tabbable element inside the dialog.
  - If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog.
- `Escape`: Closes the dialog.

#### Screen Reader

- VoiceOver: When the button is focused, the screen reader will announce the button's label and provide instructions on how to click it. When the alert dialog is triggered, the screen reader will read its content.

#### States

- When the alert dialog is triggered, `aria-modal="true"` is added to the alert dialog content. This attribute informs assistive technologies that the windows underneath the current alert dialog are not available for interaction(inert).

### Props

AlertDialog component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), and the props mentioned below.

#### AlertDialog

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Name</Table.TText>
          </Table.TH>
          <Table.TH >
            <Table.TText>Value</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>size</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>xs | sm | md | lg | full</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>md</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

### Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

#### AlertDialog with image

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function Example(){
          const [showAlertDialog, setShowAlertDialog] = React.useState(false);
          const handleClose = () => setShowAlertDialog(false);
          return (
            <>
              <Button onPress={() => setShowAlertDialog(true)}>
                <ButtonText>Pay</ButtonText>
              </Button>
              <AlertDialog isOpen={showAlertDialog} onClose={handleClose}>
                <AlertDialogBackdrop />
                <AlertDialogContent className="p-0 max-w-[590px] sm:flex-row border-primary-800 rounded-xl">
                  <Box className="bg-primary-600 min-w-[123px] items-center justify-center py-4 sm:py-0">
                    <Image
                      source={{
                        uri: 'https://s3-alpha-sig.figma.com/img/e102/c0d3/7d9780cf2bbdcce3142cbe98fb9c6d6e?Expires=1722211200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=dcv50VxIIiZhgk7eFIXeeXuIB8IvftOJ6AmQNB0aDmgTXSH3Ph1vQHftectHl91sTPpuGXPWh~B0yVfarBPjq8E-m1o4XqGE4E5EMoSraKMLpWbmkbqeHrI43wt1qQPZIy91~VvJnh~j4Srb8SIpVyKUfJ7rGWfn~umxyBBH7C-04kXgt7RYswh61lswlKugYb8BmO7VYijmjcqTHvnnajNGdjCJM9GH5AaZVGjnQaJfY6whJpjbvpu7qjWQwh2NUh6OlBQz74kUVEg8OeuUcwAA5dd6HIY0plf7o3q7Cq5x35J6oUN30HY1TZ9l2b9fg14~EUkA8apLV1XM3Lad-Q__',
                      }}
                      alt="image"
                      className="h-[95px] w-[95px]"
                    />
                  </Box>
                  <AlertDialogBody
                    className=""
                    contentContainerClassName="p-6 flex-row justify-between gap-6 md:gap-9 items-center"
                  >
                    <VStack>
                      <Heading size="md" className="text-typography-950 font-semibold leading-6">
                        Get Additional Discount
                      </Heading>
                      <Text className="pt-2 text-typography-950" size="sm">
                        Upgrade your plan before your trial ends yo get 5% discount. Use
                        code{' '}
                        <Text className="font-bold" size="sm">
                          #PRO005
                        </Text>
                      </Text>
                    </VStack>
                    <Button size="sm" className="hidden sm:flex" onPress={handleClose}>
                      <ButtonText>Upgrade</ButtonText>
                    </Button>
                  </AlertDialogBody>
                </AlertDialogContent>
              </AlertDialog>
            </>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'Example');
      },
      scope: {
        Wrapper,
        AlertDialog,
        AlertDialogBackdrop,
        AlertDialogContent,
        AlertDialogHeader,
        AlertDialogFooter,
        AlertDialogBody,
        Button,
        ButtonText,
        Center,
        Text,
        Heading,
        VStack,
        Image,
        Box
      },
      argsType: {},
    }}
  />
</Wrapper>

#### AlertDialog with icon + cta

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function Example(){
          const [showAlertDialog, setShowAlertDialog] = React.useState(false);
          const handleClose = () => setShowAlertDialog(false);
          return (
            <>
              <Button onPress={() => setShowAlertDialog(true)}>
                <ButtonText>Upload</ButtonText>
              </Button>
              <AlertDialog
                isOpen={showAlertDialog}
                onClose={handleClose}
              >
                <AlertDialogBackdrop />
                <AlertDialogContent className="p-4 gap-4 max-w-[649px] w-full md:flex-row mx-2">
                  <AlertDialogBody
                    className=""
                    contentContainerClassName="flex-row gap-4"
                  >
                    <Box className="h-10 min-[350px]:h-14 w-12 min-[350px]:w-14 rounded-full bg-background-50 items-center justify-center">
                      <Icon
                        as={UploadCloud}
                        className="stroke-background-900"
                        size="xl"
                      />
                    </Box>
                    <VStack className="gap-1">
                      <Heading size="md" className="text-typography-950 font-semibold">
                        Cloud storage full!
                      </Heading>
                      <Text size="sm">You have used up all the storage you have.</Text>
                    </VStack>
                  </AlertDialogBody>
                  <AlertDialogFooter>
                    <Button
                      variant="outline"
                      action="secondary"
                      onPress={handleClose}
                      size="sm"
                    >
                      <ButtonText>Cancel</ButtonText>
                    </Button>
                    <Button size="sm" onPress={handleClose}>
                      <ButtonText>Upgrade Storage</ButtonText>
                    </Button>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'Example');
      },
      scope: {
        Wrapper,
        AlertDialog,
        AlertDialogBackdrop,
        AlertDialogContent,
        AlertDialogFooter,
        AlertDialogBody,
        Button,
        ButtonText,
        Center,
        Text,
        Heading,
        Icon,
        VStack,
        Image,
        Box,
        UploadCloud
      },
      argsType: {},
    }}
  />
</Wrapper>

#### AlertDialog with Delete Option

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function Example(){
          const [showAlertDialog, setShowAlertDialog] = React.useState(false);
          const handleClose = () => setShowAlertDialog(false);
          return (
            <>
              <Button onPress={() => setShowAlertDialog(true)}>
                <ButtonText>Delete Invoice</ButtonText>
              </Button>
              <AlertDialog
                isOpen={showAlertDialog}
                onClose={handleClose}
              >
                <AlertDialogBackdrop />
                <AlertDialogContent className="w-full max-w-[415px] gap-4 items-center">
                  <Box className="rounded-full h-[52px] w-[52px] bg-background-error items-center justify-center">
                    <Icon as={TrashIcon} size="lg" className="stroke-error-500" />
                  </Box>
                  <VStack className="items-center">
                    <AlertDialogHeader className="mb-2">
                      <Heading size="md">Delete account?</Heading>
                    </AlertDialogHeader>
                    <AlertDialogBody>
                      <Text size="sm" className="text-center">
                        The invoice will be deleted from the invoices section and in the documents folder. This cannot be undone.
                      </Text>
                    </AlertDialogBody>
                    <AlertDialogFooter className="mt-5">
                      <Button size="sm" action="negative" onPress={handleClose} className="px-[30px]">
                        <ButtonText>Delete</ButtonText>
                      </Button>
                      <Button
                        variant="outline"
                        action="secondary"
                        onPress={handleClose}
                        size="sm"
                        className="px-[30px]"
                      >
                        <ButtonText>Cancel</ButtonText>
                      </Button>
                    </AlertDialogFooter>
                  </VStack>
                </AlertDialogContent>
              </AlertDialog>
            </>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'Example');
      },
      scope: {
        Wrapper,
        AlertDialog,
        AlertDialogBackdrop,
        AlertDialogContent,
        AlertDialogHeader,
        AlertDialogFooter,
        AlertDialogBody,
        Button,
        ButtonText,
        Text,
        Heading,
        Icon,
        TrashIcon,
        VStack,
        Box
      },
      argsType: {},
    }}
  />
</Wrapper>
